<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="..\node_modules\vue\dist\vue.js"></script>
    <style type="text/css">
        .ld {
            margin-left: 50px;
        }
    </style>
</head>
<body>
<div id="app">
    {{ formData.input1 }}
    <input type="text" style="width: 500px" class="ld" v-model="formData.input1">
    <p></p>
    {{ formData.text1 }}
    <textarea v-model="formData.text1" class="ld" ></textarea>
    <p></p>
    {{ formData.check1 }}
    <input type="checkbox" v-model="formData.check1" class="ld" ></input>
    <p></p>
    {{ formData.check2 }}
    <input type="checkbox" v-model="formData.check2" class="ld" value="1" ></input>
    <input type="checkbox" v-model="formData.check2" class="ld" value="2" ></input>
    <input type="checkbox" v-model="formData.check2" class="ld" value="3" ></input>
    <p></p>
    {{ formData.check3 }}
    <input type="checkbox" v-model="formData.check3" class="ld"
           true-value="yes"
           false-value="no"
    ></input>
    <p></p>
    {{ formData.radio1 }}
    <input type="radio" v-model="formData.radio1" class="ld" value="1" ></input>
    <input type="radio" v-model="formData.radio1" class="ld" value="2" ></input>
    <p></p>
    {{ formData.select1 }}
    <select v-model="formData.select1" class="ld">
        <option disabled value="">请选择</option>
        <option v-for="so in selectOptions" v-bind:value="so">{{so}}</option>
    </select>
    <p></p>
    {{formData.pvFromData}}
    <parent v-model="formData.pvFromData" class="ld"
            v-on:change-data-from-f="handleInputFromP"
            ref="p"
    ></parent>
</div>
<hr/>

</body>
<script type="application/javascript">
    Vue.component(
        'child',
        {
            template:`<input type="text"
                             v-bind:value="v"
                             v-on:change="$emit('inputFromC', $event.target.value)"
                             v-on:click="click"
            >`,
            props:["v"],
            model:{
                prop: 'v'
            },
            methods:{
                "click":function(){
                    console.log(this);
                }
            }
        }
    );

    Vue.component(
        'parent',
        {
            template:`<div>{{dataFromC}} <child v-model:v="dataFromC" v-on:inputFromC="handleInputFromC"></child></div>`,
            props:["value"],
            data:function (){
                return {
                    dataFromC:this.value
                }
            },
            inject: ["getAppData"],
            methods:{
                handleInputFromC:function(v){


                    var appData = this.getAppData();
                    this.dataFromC = v;
                    this.$emit('change-data-from-f' , this.dataFromC);
                }
            }
        }
    );

    var app_data = {
        formData:{
            input1: 'Hello Vue!',
            text1:"1",
            check1:true,
            check2:[],
            check3:"",
            radio1:"",
            select1:"",
            pvFromData:"pvFromData"
        },
        selectOptions:["1","2"]
    };

    //将data改为只读。
    // Object.freeze(app_data);

    var app = new Vue({
        el: '#app',
        data: app_data,
        methods:{
            "handleInputFromP" : function(v){
                this.formData.pvFromData = v;
            }
        },
        provide:function(){
            return {
                "getAppData": function () {
                    return this;
                }
            };
        }
    });

</script>
</html>